/**
 * 滚动到指定区域最底下时加载更多
 * 参考： http://blog.csdn.net/kameleon2013/article/details/53812446
 */
/**
 * 监听滚动变化
 * @param {HTMLElement}
 * @param {function} fn
 * @param {Boolean} scrollX
 *
 * @example
 * 注：
 * ①如果是使用el-scrollbar滚动组件做滚动加载，传入的HTMLElement需要指定到元素的子节点，
 *   例如：addScrollListener(this.$refs.customLine.$el.children[0], this.lineLoadMore)
 * ②使用原生内容滚动"overflow-y:scroll"属性时，可直接传入节点（此种情况下使用，请注意不能有横向滚动条）
 *   例如：addScrollListener(this.$refs.customLine, this.lineLoadMore)
 * ③使用原生内容滚动，且包含横向滚动条时，需要再传参数scrollX
 *   例如：addScrollListener(this.$refs.customLine, this.lineLoadMore, true)
 */

export const addScrollListener = function (element, fn, scrollX) {
  // 使用el-scrollbar组件，其DOM上会配置一个"margin-bottom"的值
  let extraHeight = parseInt(element.style.marginBottom) ? parseInt(element.style.marginBottom) : 0
  // 原生滚动模式下，有横向滚动条的情况下，需要去除滚动高度,否则会存在触发多次到达底部
  if (scrollX) {
    extraHeight = extraHeight - 17
  }
  if (element.attachEvent) {
    element.attachEvent('scroll', () => {
      const downTrigger = getVisibleHeight(element) + getScrollTop(element) + extraHeight >= getScrollHeight(element)
      if (downTrigger) {
        // 到达底部后执行事件
        fn()
      }
    })
  } else {
    element.addEventListener('scroll', () => {
      const downTrigger = getVisibleHeight(element) + getScrollTop(element) + extraHeight >= getScrollHeight(element)
      if (downTrigger) {
        // 到达底部后执行事件
        fn()
      }
    }, false)
  }
}

/**
 * 获取滚动位置信息
 * @param { HTMLElement } element
 * @return { number }
 */
export const getScrollTop = function (element) {
  if (element) {
    return element.scrollTop
  } else {
    return document.documentElement.scrollTop
  }
}

/**
 * 获取可视区域高度
 * @param { HTMLElement } element
 * @return { number }
 */
export const getVisibleHeight = function (element) {
  if (element) {
    return element.offsetHeight
  } else {
    return document.documentElement.offsetHeight
  }
}

/**
 * 获取滚动区域高度信息
 * @param { HTMLElement } element
 * @return { number }
 */
export const getScrollHeight = function (element) {
  if (element) {
    return element.scrollHeight
  } else {
    return document.documentElement.scrollHeight
  }
}
